<template>
	<!-- 教练课程备份 -->
	<view class="control">
		<view class="time-list">
			<view @click="selectDay(item,index)" :class="{'active':dayActive == index}" class="time-item"
				v-for="(item,index) in dataList" :key="index">
				<view class="day">{{item.weeks}}</view>
				<view class="date">{{item.mouth}}/{{item.day}}</view>
			</view>
		</view>
		<view class="header">
			<!-- <view class="text" @click="setMouth(0)">
				上一月
			</view>
			<view class="time" @click="showTime = true">
				{{date.getFullYear()}}年{{date.getMonth() + 1}}月
			</view>
			<view class="text" @click="setMouth(1)">
				下一月
			</view> -->
			<view class="text" @click="setMouth(0)">
				上一月
			</view>
			<view class="time" @click="showTime = true">
				{{date.getFullYear()}}年{{date.getMonth() + 1}}月
			</view>
			<view class="text" @click="setMouth(1)">
				下一月
			</view>
		</view>
		<scroll-view scroll-x :scroll-left="scrollLeft">
			<view class="tabbar">
				<view class="tabbar-item" v-for="(item,index) in tabData" :key="index">
					<view class="top">{{item.week}}</view>
					<view 
						class="bottom flex-center" 
						:class="{'active':selectDay.day === item.day}"
						@click="change(item)">
						{{item.day}}
					</view>
				</view>
			</view>
			<!-- <scroll-view scroll-y="true" style="width: 100%;height: 100%;background-color: #333333;">
				<view class="con" style="height: 100%;padding: 20px 20rpx;width: 15%; background-color: #f3f3f3;">
					<view class="" style="   height: 100%;padding: 20px 10px;width: 15%; background-color: #f3f3f3;">
						<view style="width: 100%;color: #333333;font-size: 22rpx;font-weight: 500;height: 81rpx;}" v-for="item in 14" :key="item">
							{{7+item}}:00
						</view>
					</view>
					
				</view>
			</scroll-view> -->
		</scroll-view>
		<scroll-view scroll-y="true" style="width: 100%;height: 100%;background-color: #eeeeee;">
			<view style="height: 100%;padding: 0px 20rpx;width: 15%; background-color: #f3f3f3;float: left;">
				<!-- <view class="" style="height: 100%;padding: 0px 10px;width: 15%; background-color: #f3f3f3;"> -->
					<view style="width: 100%;color: #333333;font-size: 22rpx;font-weight: 500;height: 120rpx;text-align: center;border: solid 2rpx #eeeeee;" v-for="item in 7" :key="item">
						<view class="" style="margin-top: 30rpx;">
							7:00
						</view>
						<view class="">
							8:00
						</view>
					</view>
				<!-- </view> -->
			</view>
			<view  style="height: 100%;width: calc(100vw / 7); background-color: #f3f3f3;float: left; ">
				<view style="width: 100%;color: #ffffff;font-size: 22rpx;font-weight: 500;height: 120rpx;background-color: rgb(99, 93, 247);text-align: center;line-height: 120rpx;border: solid 2rpx rgb(190,190,190);" v-for="item in 6" :key="item">
					课时一
				</view>
			</view>
		</scroll-view>
		<u-icon label="uView" size="40" name="https://cdn.uviewui.com/uview/example/button.png"></u-icon>
		<!-- <view class="con">
			<view class="aside">
				<view class="aside-item flex-center" v-for="item in 12" :key="item">
					{{7+item}}:00
				</view>
			</view>
			<view class="class">
				<view class="class-item">
					课时一
					游泳基本认知
				</view>
			</view>
		</view> -->

		<!-- 年月弹窗 -->
		<van-popup :show="showTime" round position="bottom" @close="showTime = false">
			<van-datetime-picker type="year-month" :value="date.getTime()" @confirm="configTime"
				@cancel="showTime = false" />

		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: new Date(),
				tabData: [],
				showTime: false,
				selectDay: {}, //选中天
				scrollLeft: 0
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				let nowDate = new Date()
				let weeks = ['日', '一', '二', '三', '四', '五', '六']
				let mouth = this.date.getMonth()
				let year = this.date.getFullYear()
				let days = new Date(year, mouth + 1, 0).getDate()
				let list = []
				for (let i = 1; i <= days; i++) {
					let date = new Date(year, mouth, i)
					let obj = {
						week: weeks[date.getDay()],
						day: date.getDate(),
						mouth: mouth + 1,
						year: year
					}
					//判断今天
					if (nowDate.getFullYear() === year && nowDate.getMonth() === mouth && nowDate.getDate() === obj.day) {
						this.selectDay = obj
						let wWidth = uni.getSystemInfoSync().windowWidth
						this.scrollLeft = wWidth / 7 * obj.day
					}
					list.push(obj)
				}
				this.tabData = list
			},
			configTime(e) {
				this.scrollLeft = 0
				this.date = new Date(e.detail)
				this.init()
				this.showTime = false
			},
			//上下月,0上一月，1下一月
			setMouth(state) {
				this.scrollLeft = 0
				if (state === 0) {
					this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
				} else {
					this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
				}
				this.init()

			},
			change(item){
				this.selectDay = item
			}
		}
	}
</script>

<style lang="scss" scoped>
	.control {
		display: flex;
		flex-direction: column;
		height: 100vh;

		.header {
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 54rpx;

			.text {
				color: rgb(99, 93, 247);
				font-size: 30rpx;
				font-weight: 700;
			}

			.time {
				margin: 0px 25rpx;
				padding: 10rpx 35rpx;
				font-size: 28rpx;
				font-weight: 700;
				background-color: rgb(99, 93, 247);
				border-radius: 60rpx;
				color: rgb(255, 255, 255);
			}
		}

		.tabbar {
			display: flex;

			.tabbar-item {
				width: calc(100vw / 7);
				flex-shrink: 0;
				display: flex;
				flex-direction: column;
				align-items: center;

				.top {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					width: 100%;
					text-align: center;
					font-weight: 700;
					border-bottom: solid 2rpx rgb(229, 229, 229);
					padding-bottom: 20rpx;
				}

				.bottom {
					color: rgb(51, 51, 51);
					font-size: 30rpx;
					font-weight: 700;
					margin-top: 20rpx;
					width: 50rpx;
					height: 50rpx;
				}
			}

			.active {
				color: rgb(255, 255, 255) !important;
				background-color: #4a61f9;
				border-radius: 50%;
			}
		}

		.con {
			flex: 1;
			height: 0;
			display: flex;

			.aside {
				display: flex;
				flex-direction: column;
				padding: 0px 20rpx;
				background-color: rgb(243, 243, 243);

				.aside-item {
					flex: 1;
					color: rgb(51, 51, 51);
					font-size: 22rpx;
					font-weight: 500;
				}
			}

			.class {
				flex: 1;
				position: relative;

				.class-item {
					position: absolute;
					width: 33.33%;
					padding: 5rpx 5rpx 10rpx 11rpx;
					background-color: rgb(40, 40, 40);
					background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
					border-radius: 5rpx;
					color: rgb(255, 255, 255);
					font-size: 22rpx;
					font-weight: 500;
					height: calc(100% / 12 *2);
				}
			}
		}
	}
</style>
